<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>

    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <div class="tip">
            <span class="tip-item"
              >巡查时间：{{
                basicForm.recordInfo.inspectionTime
                  ? basicForm.recordInfo.inspectionTime.substring(
                      0,
                      10
                    )
                  : 0
              }}</span
            >
            <span class="tip-item"
              >存在问题数：{{ problemCount }}</span
            >
          </div>
          <!-- 存在问题 -->
          <div class="project-part">
            <div class="project-part-title">存在问题</div>
            <div class="project-part-content">
              <div
                v-for="(
                  item, index
                ) of basicForm.problemInfoList"
                :key="index"
                class="project-part-content-item"
              >
                <div
                  class="project-part-content-item-index"
                >
                  {{ index + 1 }}、
                </div>
                <div class="project-part-content-item-main">
                  <el-row :gutter="24">
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <div class="item">
                        <span class="item-label"
                          >问题位置：</span
                        >
                        <span class="item-value">{{
                          item.location
                        }}</span>
                      </div>
                      <div class="item">
                        <span class="item-label"
                          >问题描述：</span
                        >
                        <span class="item-value">{{
                          item.description
                        }}</span>
                      </div>
                      <div class="item">
                        <span class="item-label"
                          >问题图片：</span
                        >
                        <div class="item-img">
                          <el-image
                            v-for="(
                              img, indexs
                            ) of item.problemAttachmentRelList"
                            :key="indexs"
                            :src="getImage(img.fileId)"
                            :preview-src-list="
                              item.problemAttachmentRelList.map(
                                (i) => getImage(i.fileId)
                              )
                            "
                          />
                        </div>
                      </div>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-row>
                        <el-col :span="24">
                          <el-form-item
                            label="整改结果"
                            :prop="
                              'problemInfoList.' +
                              index +
                              '.changeDescription'
                            "
                            :rules="
                              basicRules.changeDescription
                            "
                          >
                            <el-input
                              type="textarea"
                              v-model="
                                item.changeDescription
                              "
                              :disabled="isDetail"
                              :rows="2"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item
                            label="整改图片"
                            :prop="
                              'problemInfoList.' +
                              index +
                              '.changeAttachmentRelList'
                            "
                            :rules="
                              basicRules.changeAttachmentRelList
                            "
                          >
                            <UploadVue
                              class="file-upload"
                              v-model="
                                item.changeAttachmentRelList
                              "
                              :disabled="isDetail"
                              :showFileList="false"
                              :showProgress="true"
                              uploadUrl="/zhjs/inspection/record/upload"
                              :formData="{
                                projectId:
                                  basicForm.recordInfo
                                    .projectId
                              }"
                            />
                            <div class="process-img">
                              <div
                                class="process-img-item"
                                v-for="(
                                  img, imgIndex
                                ) of item.changeAttachmentRelList"
                                :key="imgIndex"
                              >
                                <el-image
                                  :src="
                                    getImage(
                                      img.fileId ||
                                        img.response.data ||
                                        img.extra.fileId
                                    )
                                  "
                                  :preview-src-list="
                                    item.changeAttachmentRelList.map(
                                      (item) =>
                                        getImage(
                                          item.fileId ||
                                            item.response
                                              .data ||
                                            item.extra
                                              .fileId
                                        )
                                    )
                                  "
                                />
                                <i
                                  class="el-icon-error"
                                  @click="
                                    deleteImg(
                                      index,
                                      imgIndex
                                    )
                                  "
                                  v-if="!isDetail"
                                ></i>
                              </div>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button
        @click="saveInfo(true)"
        class="save-btn"
        :loading="btnLoading"
        >提交</el-button
      >
      <el-button
        @click="saveInfo(false)"
        class="save1-btn"
        :loading="btnLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import {
  addProjectInfo,
  queryProjectDetail,
  securityFileUrl
} from '@/api/patrolRecord'
import UploadVue from '@/components/upload'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    problemCount: String
  },
  components: {
    Breadcrumb,
    UploadVue
  },
  data() {
    return {
      basicForm: {
        recordInfo: {}
      },
      basicRules: {
        changeDescription: [
          {
            required: true,
            message: '请输入整改结果',
            trigger: 'blur'
          }
        ],
        changeAttachmentRelList: [
          {
            required: true,
            message: '请上传整改图片',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      btnLoading: false
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  methods: {
    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },

    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          this.basicForm = res.data
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo(isSubmit) {
      let isError = false
      if (isSubmit) {
        this.$refs.basicFormRef.validate((res) => {
          isError = !res
        })
      }
      if (isError) {
        return
      }
      // this.btnLoading = true
      let formData = JSON.parse(
        JSON.stringify(this.basicForm)
      )
      const problemInfoList = []
      formData.problemInfoList.forEach((item) => {
        const changeAttachmentRelList = []
        item.changeAttachmentRelList.forEach((file) => {
          changeAttachmentRelList.push({
            pkid: file.pkid,
            problemId: file.problemId,
            type: file.type,
            ...file.extra,
            fileId: file.fileId || file.response.data
          })
        })
        problemInfoList.push({
          changeDescription: item.changeDescription,
          description: item.description,
          location: item.location,
          orderIndex: item.orderIndex,
          pkid: item.pkid,
          problemAttachmentRelList:
            item.problemAttachmentRelList,
          refId: item.refId,
          changeAttachmentRelList: changeAttachmentRelList
        })
      })
      let params = {
        recordInfo: formData.recordInfo,
        problemInfoList: problemInfoList
      }
      if (isSubmit) {
        params.recordInfo.changeStatus = '1'
      }

      addProjectInfo(params).then((res) => {
        if (res.success) {
          this.$message.success('保存成功')
          this.$router.push({
            path: '/wisdomConstruction/projectPatrolManagement/patrolRecord/list',
            query: { refresh: Date.now() }
          })
        } else {
          this.$message.error(res.message)
        }
        this.btnLoading = false
      })
    },

    // 删除进度照片
    deleteImg(index, imgIndex) {
      this.basicForm.problemInfoList[
        index
      ].changeAttachmentRelList.splice(imgIndex, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  ::v-deep {
    .el-input__inner {
      width: 90% !important;
    }
  }
}
.tip {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  &-item {
    margin-right: 20px;
    color: #606266;
  }
}
.project-part-content-item {
  width: 100%;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  &-index {
    color: #606266;
    font-size: 14px;
  }
  &-main {
    flex: 1;
  }
}
::v-deep {
  .file-upload {
    .el-upload {
      position: absolute;
      left: 240px;
      top: -35px;
    }
  }
}
.item {
  width: 100%;
  margin-bottom: 10px;
  &-label {
    font-size: 14px;
    color: #606266;
  }
  &-value {
    font-size: 14px;
    color: #4c565c;
  }
  &-img {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .el-image {
      width: 150px;
      height: 120px;
      margin: 0 15px 15px 0;
    }
  }
}
.process-img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 200px;
    height: 140px;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .el-icon-error {
      position: absolute;
      right: 0;
      top: 0;
      color: red;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
</style>
